import { ref, onUnmounted } from "vue";
import { setFontSize, listenResize } from "@/utils/px_rem";
import { randomQueue } from "@/utils/tools";

const option = ref({}) as any;

const colors = ["#DC4273", "#2C90ED", "#39E456", "#2AE2D8"];
function initCharts(lists: any = []) {
  if (lists.length === 0) {
    option.value = {};
    return;
  }

  option.value = {
    color: colors,
    title: {
      show: false
    },
    grid: {
      left: setFontSize(-100),
      top: setFontSize(50),
      bottom: setFontSize(10),
      right: setFontSize(10),
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
    },
    legend: {
      show: false
    },
    polar: {},
    angleAxis: {
      interval: 1,
      type: "category",
      data: [],
      z: 10,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B4A6B",
          width: setFontSize(1),
          type: "solid",
        },
      },
      axisLabel: {
        interval: 0,
        show: true,
        color: "#0B4A6B",
        margin: setFontSize(8),
        fontSize: setFontSize(16),
      },
    },
    radiusAxis: {
      min: setFontSize(40),
      max: setFontSize(120),
      interval: setFontSize(20),
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B3E5E",
          width: setFontSize(1),
          type: "solid",
        },
      },
      axisLabel: {
        formatter: "{value} %",
        show: false,
        padding: [0, 0, setFontSize(20), 0],
        color: "#0B3E5E",
        fontSize: setFontSize(16),
      },
      splitLine: {
        lineStyle: {
          color: "#0B3E5E",
          width: setFontSize(2),
          type: "solid",
        },
      },
    },
    calculable: true,
    series: [
      {
        type: "pie",
        radius: ["5%", "10%"],
        hoverAnimation: false,
        labelLine: {
          normal: {
            show: false,
            length: setFontSize(30),
            length2: setFontSize(55),
          },
          emphasis: {
            show: false,
          },
        },
        data: [
          {
            name: "",
            value: 0,
            itemStyle: {
              normal: {
                color: "#0B4A6B",
              },
            },
          },
        ],
      },
      {
        type: "pie",
        radius: ["90%", "95%"],
        hoverAnimation: false,
        labelLine: {
          normal: {
            show: false,
            length: setFontSize(30),
            length2: setFontSize(55),
          },
          emphasis: {
            show: false,
          },
        },
        name: "",
        data: [
          {
            name: "",
            value: 0,
            itemStyle: {
              normal: {
                color: "#0B4A6B",
              },
            },
          },
        ],
      },
      {
        stack: "a",
        type: "pie",
        radius: ["20%", "80%"],
        roseType: "area",
        zlevel: 10,
        label: {
          normal: {
            show: true,
            formatter: params => {
              const { name, value, percent } = params;
              return `{name|${name}}\n{value|${value}}{percent|${percent}%}`;
            },
            rich: {
              name: {
                color: 'rgba(255, 255, 255, .8)',
                fontSize: setFontSize(16),
                padding: [setFontSize(26), 0, 0, 0]
              },
              value: {
                color: '#fff',
                fontSize: setFontSize(20),
                padding: [setFontSize(10), 0, 0, 0]
              },
              percent: {
                color: 'rgba(255, 255, 255, .8)',
                fontSize: setFontSize(18),
                padding: [setFontSize(10), 0, 0, setFontSize(6)]
              }
            },
            position: "outside",
          },
          emphasis: {
            show: true,
          },
        },
        labelLine: {
          normal: {
            show: true,
            length: setFontSize(20),
            length2: setFontSize(55),
          },
          emphasis: {
            show: false,
          },
        },
        data: lists
      },
    ],
  };

}

let t: any = null;

onUnmounted(() => {
  if (t) clearInterval(t);
})

function setOption(data: any = []) {
  if (t) clearInterval(t);
  const lists = data.map((item: any) => {
    return {
      name: item.title,
      value: item.value,
    };
  });

  //  第一次 初始化
  initCharts(lists);

  t = setInterval(() => {
    //  加工 lists
    randomQueue(lists);
    initCharts(lists);
  }, 3000)

  listenResize(() =>   initCharts(lists));
}

export default function useOption(): any[] {
  return [option, setOption];
}